<!--
 * @Author: 王灿
 * @Date: 2019-11-09 00:40:05
 * @LastEditTime : 2019-12-22 09:58:43
 * @Description: 订单收货列表
 * @FilePath: \scarlet-sparrow-admin\src\views\order\order-address\index
-->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" />
    <!-- 搜索 -->
    <jq-search :content="content" @onChangeSearch="onChangeSearch"/>
    <!-- 订单收货列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 收件人 -->
        <el-table-column prop="consignee" label="收件人"></el-table-column>
        <!-- 联系电话 -->
        <el-table-column prop="receiveMobile" label="联系电话"></el-table-column>
        <!-- 收件地址 -->
        <el-table-column label="收件地址">
            <template slot-scope="scope">
              <jq-tooltip :content="scope.row.province + scope.row.city + scope.row.area + scope.row.detailedAddress" />
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createAt" label="创建时间"></el-table-column>
        <!-- 更新时间 -->
        <el-table-column prop="updateAt" label="更新时间">
          <template slot-scope="scope">
            <span> {{ scope.row.updateAt || '--' }} </span> 
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row)" type="text" size="small">----</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqSearch from '@/components/jq-search/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import { getAddressList } from '@/api/order.js'
export default {
  name: 'OrderAddress',
  components: { JqTitle, JqTooltip, JqSearch, JqPage },
  data() {
    return {
      title: { label: '订单地址', flag: false, searchFlag: false },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      userId: '',
      consignee: '',
      receiveMobile: '',
      total: 0,
      isSearch: false,
      content: [
        {key: 'userId', isSelect: true, placeholder: '请选择用户'},
        {key: 'consignee', isSelect: false, placeholder: '请输入收件人姓名'},
        {key: 'receiveMobile', isSelect: false, placeholder: '请输入联系电话'}
      ]
    }
  },
  created() {
    this.onGetAddressList()
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetAddressList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetAddressList()
    },
    // 搜索标记
    isSearch() {
      if (this.isSearch) {
        this.onGetAddressList()
      }
    }
  },
  methods: {
    // 订单地址
    onGetAddressList() {
      this.isSearch = false
      getAddressList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userId: this.userId,
        consignee: this.consignee,
        receiveMobile: this.receiveMobile
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 父子组件传值
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 父子组件传值
    onChangeSearch(data) {
      this.userId = data.userId
      this.consignee = data.consignee
      this.receiveMobile = data.receiveMobile
      this.isSearch = true
    },
    // 详情
    onEdit(row) {}
  }
}
</script>
